<template>
  <view class="content">
    <view class="g-header"></view>
    <view class="innerPre">
    </view>
    <view class="inner">
      <view class="inputList">
        <view v-for="(n,i) in settingList" :key="i">
          <view class="line" v-if="n.type==='line'">
          </view>
          <view class="inputLi" v-else>
            <view class="inputLabel">{{ n.label }}</view>
            <view class="inputRequire" v-show="n.required">*</view>
            <view class="inputValue" v-if="n.type === 'input'">
              <input v-model="n.value" :placeholder="n.placeholder" type="text">
            </view>
            <view class="inputValue" v-if="n.type === 'select'">
              <picker mode="selector" range-key="label" :value="n.rangeIndex" :range="n.rangeList" @change="rangeChange(n,i,$event)">
                <view class="pickerInner">
                  <view class="pickerInnerText" v-if="n.rangeIndex>-1">{{ n.rangeList[n.rangeIndex].label }}</view>
                  <view class="pickerInnerText" v-else>{{ n.placeholder }}</view>
                  <view class="pickerInnerIcon"></view>
                </view>
              </picker>
            </view>
            <view class="inputValue" v-if="n.type === 'avatar'">
              <view class="avatar"></view>
            </view>
            <view class="inputValue" v-if="n.type === 'code'">
              <view class="code"></view>
            </view>
            <view class="inputValue" v-if="n.type === 'manager'">
              <view class="manager" @click="util.linkTo('/pages/user/settingManage')">{{ n.placeholder }}</view>
            </view>
            <view class="inputValue" v-if="n.type === 'value'">
              <view class="manager">{{ n.placeholder }}</view>
            </view>
            <view class="inputRight"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="innerNext">
    </view>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'

export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [],
      tabList: [
        { label: '安装', value: '' },
        { label: '维修', value: '' },
        { label: '拆机或移机', value: '' },
      ],
      tabListActiveIndex: 0,
      settingList: [
        { type: 'line' },
        { type: 'avatar', label: '头像', placeholder: '头像', key: 'a', value: '' },
        { type: 'code', label: '二维码', placeholder: '二维码', key: 'a', value: '' },
        { type: 'input', label: '账号', placeholder: '账号', key: 'a', value: '' },
        { type: 'manager', label: '管理员', placeholder: '管理员', key: 'a', value: '' },
        { type: 'value', label: '子管理员', placeholder: '子管理员', key: 'a', value: '' },
        { type: 'line' },
        { type: 'input', label: '单位名称', placeholder: '单位名称', key: 'a', value: '' },
        { type: 'input', label: '税号', placeholder: '税号', key: 'a', value: '' },
        { type: 'input', label: '银行账号', placeholder: '银行账号', key: 'a', value: '' },
        { type: 'input', label: '开户银行', placeholder: '开户银行', key: 'a', value: '' },
        { type: 'input', label: '安装地址', placeholder: '安装地址', key: 'a', value: '' },
        { type: 'line' },
        { type: 'input', label: '联系人', placeholder: '联系人', key: 'a', value: '' },
        { type: 'input', label: '手机号', placeholder: '手机号', key: 'a', value: '' },
        { type: 'line' },
        { type: 'input', label: '单位性质', placeholder: '单位性质', key: 'a', value: '' },
        { type: 'input', label: '单位行业', placeholder: '单位行业', key: 'a', value: '' },
        { type: 'input', label: '饮水人数', placeholder: '饮水人数', key: 'a', value: '' },
        { type: 'input', label: '办公面积', placeholder: '办公面积', key: 'a', value: '' },
      ],
    }
  },
  onLoad(){
    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)
  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    tabListActiveIndexChange(n, i){
      this.tabListActiveIndex = i
    },
    confirm(){

    },
    rangeChange(n, i, e){
      n.rangeIndex = e.detail.value
    },
  },
}
</script>
<style lang="scss">
//@import "./000.scss";

page {
  background: #F7F7F7;
}

.innerPre {

}

.inner {
}

.innerNext {

}

.inputList {
  .line {
    background: transparent;
    height: 20px;
  }
  .inputLi {
    background: white;
    padding: 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #00000010;
    .inputLabel {
      font-size: 28px;
      font-weight: normal;
      line-height: 44px;
    }
    .inputRequire {
      opacity: 1;
      color: red;
      padding: 10px;
    }
    .inputRight {
      width: 32px;
      height: 32px;

      background-image: url(#{$bgPath}/icon_right_grey.png);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% 100%;
      margin-left: 20px;
    }

    .inputValue {
      margin-left: auto;
      text-align: right;
    }
    .avatar{
      width: 112px;
      height: 112px;
      border-radius: 16px 16px 16px 16px;
      background-color: lightgrey;
    }
    .code {
      width: 32px;
      height: 32px;
      border-radius: 0px 0px 0px 0px;
      background-color: lightgrey;
    }

  }
}


</style>
